import { useState, useEffect } from "react";
import { Form, Input, Row, Col, Card, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import styles from "./index.module.less";
import Iconfont from "@/components/IconFont";
import CryptoJS from "crypto-js";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { outboundproductsPay } from "../service";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
const { TextArea } = Input;
//去支付
const goPay = ({ fetchList, cashpayment, select, handleCancel, addVisible, priceSum, dataSource }) => {
	const [form] = Form.useForm();
	const [method, setMethod] = useState(1);

	useEffect(() => {
		form.resetFields();
	}, []);

	const onOk = () => {
		let finalArray = select.flatMap(item => item.outboundProductIds);
		form.validateFields().then(async value => {
			const { success } = await outboundproductsPay({
				payPwd: CryptoJS.MD5(value.payPwd).toString(),
				ids: finalArray
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	return (
		<CommonModal title={{ title: "确认付款" }} visible={addVisible} onOk={onOk} width={"464px"} onCancel={onCancel}>
			<Form form={form} name="stock-set-remark-modal">
				<div style={{ marginBottom: "24px" }}>
					<SubTitle symbol as="s2" title="支付方式" />
					<div style={{ display: "flex" }}>
						<Card
							className={styles.cardStyle}
							style={{ border: method == "1" ? "1px solid rgba(0, 104, 255, 1)" : "" }}
							onClick={() => setMethod(1)}
						>
							<span className={styles.absolutedCenter}>
								<Iconfont type="iconyuezhifu-copy" style={{ fontSize: 40, marginRight: 10, color: "red" }}></Iconfont>
								<div>
									<span className="common-color11" style={{ fontSize: "14px", lineHeight: "14px" }}>
										余额支付
									</span>
									<div style={{ fontSize: "10px", lineHeight: "10px", color: "rgba(255, 67, 84, 1)" }}>免手续费</div>
								</div>
							</span>
							{method == "1" && <Iconfont className={styles.checkedBox} type="icontriangle" />}
						</Card>
						<Card
							className={styles.cardStyle}
							style={{ border: method == "2" ? "1px solid rgba(0, 104, 255, 1)" : "" }}
							onClick={() => setMethod(2)}
						>
							<span className={styles.absolutedCenter}>
								<Iconfont type="iconzhifupingtai-zhifubao-copy" style={{ fontSize: 40, marginRight: 10 }}></Iconfont>
								<div>
									<span className="common-color11" style={{ fontSize: "14px", lineHeight: "14px" }}>
										支付宝
									</span>
									<div style={{ fontSize: "10px", lineHeight: "10px", color: "#ccc" }}>(手续费费率：0.29%)</div>
								</div>
							</span>
							{method == "2" && <Iconfont className={styles.checkedBox} type="icontriangle" />}
						</Card>
					</div>
				</div>

				<SubTitle symbol as="s2" title="支付详情" />
				<Row style={{ margin: "12px   0 16px 16px" }}>
					<Col span={12}>
						<div>
							余额应付：<span className={styles.co2641}>￥{cashpayment ? cashpayment.balanceTotalAmount : 0}</span>
						</div>
					</Col>
					<Col span={12}>
						<div>
							账户余额：<span className={styles.co2641}>￥{cashpayment ? cashpayment.availBalance : 0}</span>
						</div>
					</Col>
				</Row>
				<Row style={{ margin: "12px   0 16px 16px" }}>
					<Col span={24}>
						<Form.Item name="payPwd" rules={[{ required: true, message: "请输入支付密码" }]}>
							<CommonInput Component={Input} placeholder="请输入支付密码" aria-required />
						</Form.Item>
					</Col>
				</Row>
			</Form>
		</CommonModal>
	);
};

export default goPay;
